<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="./css/base.css">
	<link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">

	<style>
		.content .item {
			margin-top: 10px;
			margin-bottom: 10px;
		}

		.content .item img {
			width: 100%;
			height: 100%;
			box-shadow: 0px 0px 10px #ccc;

		}

		.content .item .title:hover {
			text-decoration: underline;
			cursor: pointer;
		}


		.content .item div:first-child:hover img {
			opacity: 0.7;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}

		.content .item .intro {
			margin-top: 10px;
			color: #ccc;
			font-size: 14px;
		}
	</style>
</head>

<body>
	<div class="container">
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<!-- *Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#" style="display:flex;">
						博客
					</a>
				</div>

				<!-- *Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

					<ul class="nav navbar-nav navbar-right">
						<li><a href="/">首页</a></li>
						<li class="dropdown">
							<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button"
								aria-haspopup="true" aria-expanded="false">分类 <span class="caret"></span></a>
							<ul class="dropdown-menu" id="cates">
								<li></li>
							</ul>
						</li>
						<li><a href="/tags.html">标签</a></li>
						<li><a href="/about.html">关于我</a></li>
					</ul>
				</div>
			</div>
		</nav>

		<div class="content">
			<h4>最新文章</h4>
			<div class="artlist" id="article">


			</div>
		</div>

		<button type="button" class="btn  btn-block" id="loadMore">查看更多</button>
		<hr>

		<div class="footer" style="text-align:center;font-size: 14px; color: #999;margin:10px 0;">
			首页 | 主站 | GitHub | created at 2021/09/10 | Powered by Chen Quan

		</div>
</body>
<script src="./js/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="https://momentjs.bootcss.com/downloads/moment.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>

<script>
	let page = 1; //页
	let pagesize = 2; //条数 
	let ArticleLoading = false; // 记录文章加载情况，是否已经加载完毕


	//加载更多
	$('#loadMore').on('click', function () {
		if (ArticleLoading) {
			//加载完毕直接退出函数，且提示用户
			layer.msg('地主家也没有余粮了!!!', {
				icon: 5
			})
			return;
		}
		$(this).prop('disabled', true).html('加载中 ')
		page++;
		loadArticle(page, pagesize).then(res => {
			if (res.length < pagesize) {
				//加载完毕之后
				ArticleLoading = true;
			}
			$(this).prop('disabled', false).html('查看更多')
			let articleHtml = renderArticle(res)
			let oldData = $('#article').html()
			$('#article').html(oldData + articleHtml)
			imgs= document.querySelectorAll('img')
			scrollHandle(imgs)
		})
	})


	//加载文章
	function loadArticle(page, pagesize) {
		// $('http//217.0.0.1:4790/article',{page:1,pagesize:3}) //get
		return $.ajax({
			//返回的是一个promise
			url: 'http://127.0.0.1:4790/api/article',
			data: {
				page,
				pagesize
			}
		}) //get

	}

	//加载分页
	function loadPaging() {
		return $.ajax({
			url: 'http://127.0.0.1:4790/api/cate',
		})
	}


	//初始化数据
	async function initDta() {
		NProgress.set(0.4)
		let pro1 = loadArticle(page, pagesize);
		let pro2 = loadPaging();
		let data = await Promise.all([pro1, pro2])
		NProgress.done(0.4)
		let [articles, cates] = data;
		// console.log(articles);
		let cata = renderCate(cates);
		$('#cates').html(cata)
		let lis = renderArticle(articles)
		$("#article").html(lis)
		
		//l懒加载
		imgs= document.querySelectorAll('img')
		scrollHandle(imgs)
	}


	// 渲染分类数据 
	function renderCate(cates) {
		let cata = '';
		cates.forEach((cat) => {
			let {
				id,
				name
			} = cat;
			cata += `<li><a href='./cate.html?id=${id}'>${name}</a></li>`
	
		});
		console.log(cata);
		return cata;
	}



	//渲染文章数据 
	function renderArticle(articles) {
		let lis = '';
		articles.forEach((art) => {
			let {
				sort,
				id,
				name,
				author,
				img,
				title,
				Update_time,
				content,
			} = art;
			img = 'http://127.0.0.1:4790/' + img;
			Update_time = moment(Update_time).format('YYYY- MM-DD ');
			// Update_time =	moment(Update_time).add(10, 'days').calendar();
			lis += `
		<div class='item row'>
					<div class="col-md-2">	
						<img data-src="${img}" alt="">

					</div>
					<div class="col-md-10" id="">
						<div class="date ">作者：${author} 、 ${Update_time} 、分类：<a href ='cate.html?id=${id}'>${name}</a></div>
						<div class="title">标题：${title}</div>
						<a href= '/detail.html?id=${id}'><div class="intro">内容：${content}</div></a>
					</div>
					<hr>
				</div>`
		})

		return lis
	}


	//初始化数据
	initDta()

	// 此时有跨域限制 需要在后台server加 请求头 或 中间件






	//懒加载
	window.onscroll = function(event){
        scrollHandle(imgs)
    };
	let windonHeight = window.innerHeight;
      function scrollHandle () {
        imgs.forEach(img => {
            if (img.getAttribute('isDone')) {
                return;
            }
            let top = img.getBoundingClientRect().top;
            if (top > 0 && top < windonHeight) {
                // console.log('加载中 ');
                img.src = img.getAttribute('data-src');
                img.setAttribute('isDone', true)
            }
        })
    }

</script>

</html>